<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人资料</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
</head>

<body class="body">



    <!-- 表单 -->
    <div class="weui-cells">
        <!-- 个人资料 -->
        <div class="person df">
            <a href="./mine.html"><span class="iconfont icon-xiangzuo1"></span></a>
            <p>个人资料</p>
        </div>
        <div class="weui-cell weui-cell_active weui-cell_select" role="button" aria-haspopup="listbox">
            <div class="weui-cell__bd df jcsb avatar-box">
                <!-- 照片选择框 -->
                <div class="avatar-wrapper pho">
                    <!-- <img id="avatar" alt="" /> -->
                    <input type="file" id="upload" />
                </div>
                <div class="weui-select">更换头像</div>
                <img id="avatar" class="avatar" alt="" />
            </div>
        </div>
        <!-- 昵称 -->
        <label for="nickname" class="weui-cell weui-cell_active weui-cell_wrap">
            <div class="weui-cell__hd">
                <span class="weui-label">昵称</span>
            </div>
            <div class="weui-cell__bd">
                <input id="nickname" class="weui-input weui-cell__control weui-cell__control_flex" placeholder="昵称" />
            </div>
        </label>
        <!-- 性别 -->
        <div id="showPicker" role="button" aria-haspopup="listbox"
            class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
            <div class="weui-cell__bd">
                <div class="weui-select right" id="sex">女</div>
            </div>
        </div>
        <!-- 生日 -->
        <div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after" role="button"
            aria-haspopup="listbox" id="showDatePicker">
            <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
            <div class="weui-cell__bd">
                <div class="weui-select" id="selBirthday">请选择日期</div>
            </div>
        </div>
        <!-- 省份 -->
        <div id="showProvince" role="button" aria-haspopup="listbox"
            class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">省份</label></div>
            <div class="weui-cell__bd">
                <div class="weui-select right" id="province">请选择省份</div>
            </div>
        </div>
        <!-- 城市 -->
        <div id="showCity" role="button" aria-haspopup="listbox"
            class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">城市</label></div>
            <div class="weui-cell__bd">
                <div class="weui-select right" id="chengdu">请选择城市</div>
            </div>
        </div>
        <!-- 个人简介 -->
        <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title instr">个人简介</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell weui-cell_active">
                    <div class="weui-cell__bd gray">
                        <textarea id="text" class="weui-textarea" placeholder="多行输入" rows="3"
                            maxlength="200"></textarea>
                        <div role="option" aria-live="polite" class="weui-textarea-counter">
                            <span id="numchange">0</span>
                            /200字
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 保存信息 -->
        <div class="weui-form__opr-area" id="submit">
            <a role="button" class="weui-btn weui-btn_primary blue" href="javascript:" id="showTooltips">
                保存信息
            </a>
        </div>
    </div>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

</html>